<template>
  <view class="article-detail-container">
    <!-- <view class="article-title">相亲不尬的实用攻略</view> -->
    <!-- <view class="article-read-count">39230人看过</view> -->


    <view class="article-content">
      <view class="article-wa-item">
        <view 
          v-html="articleInfo.articleContent" 
          @longpress="handleLongPress"
          class="copyable-content"
        ></view>
      </view>
    </view>

    <view class="article-tags">
      <view class="tag">#相亲</view>
      <view class="tag">#恋爱技巧</view>
    </view>


  </view>
  

  <TmpArticleFooter
    :articleCode="articleInfo.articleCode" 
    :sourceType="sourceType"
    :feedbackStatus="feedbackStatus"
  />

  <!-- <TmpArticleFooter

  /> -->

</template>
  
  <script>
  import TmpArticleFooter from '@/components/common/tmp-article-footer.vue'
  import TmpModal from '@/components/common/tmp-modal.vue'
          import request from '@/common/tools/tools-request'

  export default {
    name: 'ArticleDetail',
    components: { TmpArticleFooter, TmpModal },
    data() {
      return {
				value: 0,
        articleInfo: {},
        sourceType: 'course',
        feedbackStatus: {
            like : false,
            collect : false,
            useful : false,
            useless : false
        }

			}
		},
    computed: {
			customStyle() {
				return {
					height: '80rpx',
					background: '#3c9cff',
					color: '#fff',
				}
			}
		},
    methods: {
      getArticleDetail(articleCode) {
        request.post({
          url: '/api/article/detail',
          data: { articleCode }
        }).then(res => {
          if (res && res.data) {
            // 处理文章详情数据
            console.log('文章详情:', res.data)
            this.articleInfo = res.data;
            this.feedbackStatus = res.data.feedbackStatus
          }
        }).catch(err => {
          console.error('获取文章详情失败:', err)
        })
      },
      
      // 长按复制内容
      handleLongPress() {
        if (this.articleInfo.articleContent) {
          // 去除HTML标签，获取纯文本内容
          const textContent = this.stripHtmlTags(this.articleInfo.articleContent);
          
          // 检查内容是否为空
          if (!textContent.trim()) {
            uni.showToast({
              title: '没有可复制的内容',
              icon: 'none',
              duration: 2000
            });
            return;
          }
          
          // 复制到剪贴板
          uni.setClipboardData({
            data: textContent,
            success: () => {
              uni.showToast({
                title: '内容已复制到剪贴板',
                icon: 'success',
                duration: 2000
              });
            },
            fail: (err) => {
              console.error('复制失败:', err);
              uni.showToast({
                title: '复制失败，请重试',
                icon: 'error',
                duration: 2000
              });
            }
          });
        } else {
          uni.showToast({
            title: '暂无内容可复制',
            icon: 'none',
            duration: 2000
          });
        }
      },
      
      // 去除HTML标签的辅助方法
      stripHtmlTags(html) {
        if (!html) return '';
        
        // 使用正则表达式去除HTML标签
        return html.replace(/<[^>]*>/g, '')
                   .replace(/&nbsp;/g, ' ')
                   .replace(/&amp;/g, '&')
                   .replace(/&lt;/g, '<')
                   .replace(/&gt;/g, '>')
                   .replace(/&quot;/g, '"')
                   .replace(/&#39;/g, "'")
                   .trim();
      }
    },
    onLoad(options) {
      console.log('articleCode:', options.articleCode);
      if (options.articleCode) {
        this.getArticleDetail(options.articleCode)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

  page{
    //background: #ecf5ff;
    background: rgba(255,229,100,.3);;
  }

  .article-detail-container {
/*    background: #fafbfc; */
    min-height: 85vh;
    padding: 32rpx 0 0rpx 0;
  // 内容居中
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
  }
  
  .article-title {
    font-size: 38rpx;
    font-weight: bold;
    color: #222;
    margin: 0 32rpx 18rpx 32rpx;
    line-height: 1.4;
  }

  .article-read-count {
    color: #bbb;
    font-size: 26rpx;
    margin: 0 32rpx 18rpx 32rpx;
  }
  .article-tags {
    display: flex;
    gap: 18rpx;
    margin: 0 32rpx 32rpx 32rpx;
  }
  .tag {
    background: #ffffff;
    color: #000;
    font-size: 24rpx;
    border-radius: 32rpx;
    padding: 8rpx 28rpx;
  }
  .article-content {
    // background: #fff;
    border-radius: 18rpx;
    margin: 80rpx 30rpx 0rpx 30rpx;
    /*padding: 32rpx 28rpx 40rpx 28rpx;*/
    color: #222;
    // font-size: 32rpx;
    line-height: 1.9;
  }
  .content-block {
    margin: 32rpx 0 0 0;
  }
  .content-line {
    margin: 12rpx 0 0 0;
  }

  .evaluate-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18rpx;
    border: 2rpx solid #eee;
    padding: 16rpx 48rpx;
    font-size: 28rpx;
    color: #888;
    gap: 12rpx;
  }
  .evaluate-btn.active {
    border-color: #3c9cff;
    color: #3c9cff;
    font-weight: 500;
  }
  .article-bottom-bar {

  }

  .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #222;
    gap: 8rpx;
  }

  .article-wa-item{
    
    margin: 15px 0px;
    /*background-color: $uv-primary-dark;*/
    // background-color: #ecf5ff;
    // color: #3c9cff;
    color: #6b5900;
    padding: 20px 20px;
    font-size: 30rpx;
    border-radius: 4px;
  }
  
  .copyable-content {
    user-select: text;
    -webkit-user-select: text;
    cursor: pointer;
    position: relative;
  }
  
  .copyable-content::after {
    content: '长按复制';
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 20rpx;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .copyable-content:active::after {
    opacity: 1;
  }


  </style>
  